<template>
    <div class="renewable-manage toilet-manage toilet-manage2">
        <div class="map">
            <img src="@/assets/images/city-map.png" alt="" />
            <div class="pos-item" style="left: 400px; top: 600px;">
                <p class="word">龙腾XX大厦</p>
                <div class="icon"></div>
            </div>
            <div class="pos-item active" style="left: 200px; top: 800px;">
                <p class="word">金华XX商城</p>
                <div class="icon"></div>
            </div>
        </div>
        <div class="pos-select-box">
            <div class="diy-select">
                <div class="icon-word">金华XX商城</div>
                <!-- 下拉加active -->
                <div class="select-arraw"></div>
            </div>
            <div class="select-detail">
                <div class="select-item item1">
                    <div class="item-content">
                        <div class="floor">
                            <span class="num">32</span>
                            <span class="unit">ug/m³</span>
                        </div>
                        <div class="word">pm10</div>
                    </div>
                </div>
                <div class="select-item item2">
                    <div class="item-content">
                        <div class="floor">
                            <span class="num">32</span>
                            <span class="unit">ug/m³</span>
                        </div>
                        <div class="word">甲醛</div>
                    </div>
                </div>
                <div class="select-item item3">
                    <div class="item-content">
                        <div class="floor">
                            <span class="num">32</span>
                            <span class="unit">%</span>
                        </div>
                        <div class="word">TVOC</div>
                    </div>
                </div>
                <div class="select-item item4">
                    <div class="item-content">
                        <div class="floor">
                            <span class="num">28</span>
                            <span class="unit">°</span>
                        </div>
                        <div class="word">湿度</div>
                    </div>
                </div>
                <div class="select-item item5">
                    <div class="item-content">
                        <div class="floor">
                            <span class="num">32</span>
                            <span class="unit">%</span>
                        </div>
                        <div class="word">湿度</div>
                    </div>
                </div>
                <div class="select-item item6">
                    <div class="item-content">
                        <div class="floor">
                            <span class="num">32</span>
                            <span class="unit">%</span>
                        </div>
                        <div class="word">CO2</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-block">
            <div class="use-count-box">
                <div class="use-count">
                    <img src="@/assets/images/icon-renshu.png" alt="" />
                    <p class="num">3587</p>
                    <p class="name">当前累计使用人数</p>
                </div>
                <div class="use-detail">
                    <div class="title">当前空间闲散数</div>
                    <div class="detail-list">
                        <div class="detail-item">
                            <p class="num">17</p>
                            <p class="f20">男厕</p>
                        </div>
                        <div class="detail-item">
                            <p class="num">17</p>
                            <p class="f20">女厕</p>
                        </div>
                        <div class="detail-item">
                            <p class="num">17</p>
                            <p class="f20">无障碍</p>
                        </div>
                    </div>
                </div>
                <div class="icon-list">
                    <div class="icon-list-item item1">
                        <div class="item-content">
                            <div class="floor">
                                <span class="num">26</span>
                                <span class="unit">t</span>
                            </div>
                            <div class="word">当前用水</div>
                        </div>
                    </div>
                    <div class="icon-list-item item2">
                        <div class="item-content">
                            <div class="floor">
                                <span class="num">96</span>
                                <span class="unit">°</span>
                            </div>
                            <div class="word">当前充电量</div>
                        </div>
                    </div>
                    <div class="icon-list-item item3">
                        <div class="item-content">
                            <div class="floor">
                                <span class="num">23.6</span>
                                <span class="unit">g</span>
                            </div>
                            <div class="word">当前流量使用</div>
                        </div>
                    </div>
                    <div class="icon-list-item item4">
                        <div class="item-content">
                            <div class="floor">
                                <span class="num">230</span>
                                <span class="unit">°</span>
                            </div>
                            <div class="word">当前用电量</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="toilet-detail">
                <div class="status-tip clearfix">
                    <div class="fl status-item status1">无人使用</div>
                    <div class="fl status-item status2">有人使用</div>
                    <div class="fl status-item status3">正在维修</div>
                </div>
                <div class="toilet-data-box man">
                    <div class="top-line">
                        <div class="item" v-for="i in 3" :key="i">
                            <img src="@/assets/images/icon-dunce.png" alt="" />
                        </div>
                        <div class="item" v-for="i in 5" :key="i">
                            <img src="@/assets/images/icon-dunce-dk.png" alt="" />
                        </div>
                        <div class="item status2">
                            <img src="@/assets/images/icon-dunce-dk.png" alt="" />
                            <img src="" alt="" />
                        </div>
                        <div class="item no-zai" v-for="i in 2" :key="i">
                            <img src="@/assets/images/icon-wza.png" alt="" />
                            <p class="word">无障碍</p>
                        </div>
                    </div>
                    <div class="bottom-line">
                        <div class="item" v-for="i in 9" :key="i">
                            <img src="@/assets/images/icon-xbc.png" alt="" />
                        </div>
                    </div>
                </div>
                <div class="toilet-data-box woman">
                    <div class="top-line">
                        <div class="item" v-for="i in 3" :key="i">
                            <img src="@/assets/images/icon-dunce.png" alt="" />
                        </div>
                        <div class="item status3">
                            <img src="@/assets/images/icon-weixiu.png" alt="" />
                        </div>
                        <div class="item" v-for="i in 5" :key="i">
                            <img src="@/assets/images/icon-dunce-dk.png" alt="" />
                        </div>
                        <div class="item no-zai" v-for="i in 2" :key="i">
                            <img src="@/assets/images/icon-wza.png" alt="" />
                            <p class="word">无障碍</p>
                        </div>
                    </div>
                    <div class="bottom-line">
                        <div class="item" v-for="i in 3" :key="i">
                            <img src="@/assets/images/icon-dunce.png" alt="" />
                        </div>
                        <div class="item" v-for="i in 6" :key="i">
                            <img src="@/assets/images/icon-dunce-dk.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped></style>
